<script setup lang="ts">
import { navigateTo } from '@tarojs/taro';
import { TagType } from '@nutui/nutui-taro/dist/types/__VUE/tag/index.taro.vue';
import { RectRight as AppNutIconRectRight } from '@nutui/icons-vue-taro';
import { reactive, onMounted } from 'vue';
import dayjs from 'dayjs';
import { MY_LIST } from '/@/api/modules/visitor/visitor-appointment-api';
import {
  VISITOR_APPOINTMENT_AUDIT_STATUS,
  VISITOR_APPOINTMENT_AUDIT_STATUS_COLOR,
  VISITOR_APPOINTMENT_AUDIT_STATUS_BG_COLOR,
} from '/@/common/constant';
import { appEvents } from '/@/utils/events';

const state = reactive<{
  /**
   * 当前页
   */
  activePage: number;
  /**
   * 加载状态
   */
  loading: boolean;
  /**
   * 加载完成状态
   */
  finished: boolean;
  /**
   * 列表
   */
  list: AppSysVisitor.AppointmentDto[];
}>({
  activePage: 1,
  loading: false,
  finished: false,
  list: [],
});

/**
 * @description 列表查询
 * @param {Number} page -当前页
 * @param {Number} pageSize -每页条数
 */
function queryList(page: number = 1, pageSize: number = 15) {
  if (!page && state.finished) return;
  state.loading = true;

  MY_LIST({
    comQuery: { page, pageSize },
  })
    .then((res) => {
      state.loading = false;

      if (
        state.activePage >=
        (res.comQuery.pageCount ||
          (res.comQuery.totalCount as number) / (res.comQuery.pageSize as number) ||
          1)
      )
        state.finished = true;
      if (!res.content || !res.content.length) return;

      res.content.forEach((item) => state.list.push(item));

      state.activePage += 1;
    })
    .catch(() => {
      state.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoading() {
  if (state.finished) return;

  queryList(state.activePage);
}

onMounted(() => {
  state.activePage = 1;
  state.loading = true;
  state.finished = false;
  state.list = [];
  onLoading();

  appEvents.on('visitorAppointmentStatusChange', ({ id, status, signOut }) => {
    const activeItemIndex = state.list.findIndex((item) => {
      return item.id === id;
    });

    if (state) state.list[activeItemIndex].auditStatus = status;
    if (signOut) state.list[activeItemIndex].signOut = signOut;
  });
});
</script>
<template>
  <scroll-view
    class="app-page__wrapper"
    :scroll-y="true"
    :lower-threshold="100"
    @scrolltolower="onLoading()"
  >
    <view class="visitor-appointment-list">
      <view
        class="visitor-appointment-item"
        v-for="item in state.list"
        :key="item.id"
        @click="
          navigateTo({
            url: `/pages/visitor/appointment-detail/index?id=${item.id}&auditStatus=${item.auditStatus}`,
          })
        "
      >
        <view class="visitor-appointment-item__header">
          <text class="visitor-appointment-item__person-name">
            {{ item.personName || '-' }}
          </text>
          <nut-tag
            v-if="item.cancelStatus === 2 && item.signOut === 2"
            :text-color="item.auditStatus ? VISITOR_APPOINTMENT_AUDIT_STATUS_COLOR[item.auditStatus] as TagType : undefined"
            :color="item.auditStatus ? VISITOR_APPOINTMENT_AUDIT_STATUS_BG_COLOR[item.auditStatus] as TagType : undefined"
          >
            {{ item.auditStatus ? VISITOR_APPOINTMENT_AUDIT_STATUS[item.auditStatus] : '-' }}
          </nut-tag>
          <nut-tag v-else-if="item.cancelStatus === 1" color="#53b7551a" text-color="#bbb">
            已取消
          </nut-tag>
          <nut-tag v-else-if="item.signOut === 1" color="#E9E9E9" textColor="#999999">
            已签离
          </nut-tag>
        </view>
        <view class="visitor-appointment-item__body">
          <view class="visitor-appointment-item__body--left">
            <view class="visitor-appointment-item__phone">{{ item.phone || '-' }}</view>
            <view class="visitor-appointment-item__create-time">{{
              item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') : '-'
            }}</view>
          </view>
          <view class="visitor-appointment-item__body--right">
            <app-nut-icon-rect-right />
          </view>
        </view>
      </view>
    </view>

    <view class="app-page__list-tips">
      <text v-if="!state.list.length">暂无数据！</text>
      <text v-else-if="state.list.length && state.loading">加载中...</text>
      <text v-else-if="state.list.length && state.finished">加载完成!</text>
    </view>
  </scroll-view>
</template>
<style lang="scss">
.visitor-appointment-list {
  padding: 30px 30px 0;
  .visitor-appointment-item {
    background-color: #fff;
    padding: 20px 30px;
    margin-bottom: 20px;
    font-size: 25px;
    color: #666;

    &__header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    &__body {
      display: flex;
      align-items: center;

      &--left {
        flex: 1;
      }
    }

    &__person-name-wrapper {
      margin-bottom: 10px;
    }

    &__person-name {
      font-size: 30px;
      font-weight: bold;
      color: #333;
      margin-right: 20px;
      flex: 1;
    }
  }
}
</style>
